<template>
  <div class="wrapper">
    <!--  导航栏  -->
    <Header active="home" @getUser="getUser"/>
    <!--内容-->
    <div style="margin-top:20px;">
      <el-row>
        <el-col :offset="18" :span="2">
          <el-button type="primary" style="float:right;" @click="showPostDialog" v-if="user!=null">发帖</el-button>
        </el-col>
      </el-row>
      <el-row type="flex" justify="left" align="middle">
        <el-col :offset="4" :span="16">
          <el-tabs type="border-card" @tab-click="changeTab" v-model="activeName">
            <el-tab-pane label="最新" name="newest">
              <el-empty description="帖子为空" :image-size="screenHeight" v-if="postList.length==0"></el-empty>
              <el-row v-for="post in postList" :key="post.id" v-else>
                <el-col>
                  <el-row type="flex" align="middle"
                          style="margin-top:10px;">
                    <el-col :span="2">
                      <!-- 进入用户主页 -->
                      <a :href="'/profile?userId='+post.user.id">
                        <el-avatar :src="post.user.headerUrl" alt="用户头像"
                                   style="width:50px;height:50px;" size="large"></el-avatar>
                      </a>
                    </el-col>
                    <el-col :span="22" style="text-align: left;">
                      <b>
                        <a :href="'/postDetail?postId='+post.post.id">{{ post.post.title }}</a>
                        <el-tag effect="dark" type="success" size="mini" v-if="post.post.type==1">置顶</el-tag>
                        <el-tag effect="dark" type="danger" size="mini" v-if="post.post.status==1">精华</el-tag>
                      </b>
                      <div style="font-size: 10px;margin-top:10px;">
                        <span style="float: left;">{{ post.user.username }} 发布于 {{ post.post.createTime }}</span>
                        <span style="float: right;">
                          赞 <el-badge :value="post.post.good" :max="999" :title="post.post.good"></el-badge>|
                          回帖<el-badge :value="post.post.commentCount" :max="999" :title="post.post.commentCount"></el-badge></span>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <el-divider></el-divider>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="最热" name="hottest">
              <el-empty description="帖子为空" :image-size="screenHeight" v-if="postList.length==0"></el-empty>
              <el-row v-for="post in postList" :key="post.id" v-else>
                <el-col>
                  <el-row type="flex" align="middle"
                          style="margin-top:10px;">
                    <el-col :span="2">
                      <!-- 进入用户主页 -->
                      <a href="#">
                        <el-avatar :src="post.user.headerUrl" alt="用户头像"
                                   style="width:50px;height:50px;" size="large"></el-avatar>
                      </a>
                    </el-col>
                    <el-col :span="22" style="text-align: left;">
                      <b>
                        <a :href="'/postDetail?postId='+post.post.id">{{ post.post.title }}</a>
                        <el-tag effect="dark" type="success" size="mini" v-if="post.post.type==1">置顶</el-tag>
                        <el-tag effect="dark" type="danger" size="mini" v-if="post.post.status==1">精华</el-tag>
                      </b>
                      <div style="font-size: 10px;margin-top:10px;">
                        <span style="float: left;">{{ post.user.username }} 发布于 {{ post.post.createTime }}</span>
                        <span style="float: right;">
                          赞 <el-badge :value="post.post.good" :max="999" :title="post.post.good"></el-badge>|
                          回帖<el-badge :value="post.post.commentCount" :max="999" :title="post.post.commentCount"></el-badge></span>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col>
                      <el-divider></el-divider>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
      <el-pagination
          v-if="postList.length>0"
          style="margin-top:10px;"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!--  底栏  -->
    <Footer/>

    <!--  弹出类对话框  -->
    <el-dialog
        title="发帖"
        :visible.sync="newPostDialogShow"
        width="60%">
      <el-form :model="postFormData" label-width="50px">
        <el-form-item label="标题">
          <el-input v-model="postFormData.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="postFormData.content" type="textarea" :rows="10"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="newPostDialogShow = false">取 消</el-button>
      <el-button type="primary" @click="submitPost">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/views/Header";
import Footer from "@/views/Footer";

export default {
  name: "Home",
  components: {Footer, Header},
  data() {
    return {
      activeName: 'newest',
      screenHeight: screen.availHeight / 2,
      postList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      orderBy: '',
      newPostDialogShow: false,
      postFormData: {},
      post_list_url: '/community/home/postList',
      post_add_url: '/community/home/post',
      user: null,
    }
  },
  mounted() {
    this.getPostList();
  },
  methods: {
    getUser(user) {
      console.log('getUser:',user);
      this.user=user;
    },
    changeTab() {
      this.getPostList();
    },
    getPostList() {
      this.axios.get(this.post_list_url,
          {
            params: {pageSize: this.pageSize, pageNum: this.pageNum, orderBy: this.activeName}
          }).then((response) => {
        console.log(response);
        this.postList = response.data.data;
        this.total = response.data.total;
      }).catch((error) => {
        console.log(error);
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPostList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getPostList();
    },
    showPostDialog() {
      this.newPostDialogShow = true;
    },
    submitPost() {
      this.axios.post(this.post_add_url,
          this.postFormData
      ).then((response) => {
        console.log(response);
        this.newPostDialogShow = false;
        if (response.data.code === '00000') {
          this.$message.success('发帖成功!');
          this.getPostList();
        } else {
          this.$message.success('发帖失败!');
          this.$message.error(response.data.message);
        }
      }).catch((error) => {
        this.newPostDialogShow = false;
        console.log(error);
        this.$message.error(error);
      });
      this.postFormData = {};
    }
  }
}
</script>

<style scoped>
.list-unstyled {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

>>> *.el-tag {
  margin-left: 5px;
}
</style>
